<template>
  <div>
    <v-tableTitle :btnConfig="btnConfig" :tableSelectData="tableSelectData" title="账号信息" @star="star" @del="del" @newCreate="newCreate"></v-tableTitle>
    <GTable ref="table" :hasCheck="true" :hasEdit="true" :api="apiMap.getListApi" :columnSource="baseColumns" :cbFun="cbFun" @selection-change="data => tableSelectData = data"
            @setdialog="setdialog" />

    <el-dialog :title="dialogModule.title" :visible.sync="dialogModule.flag" center v-dialogDrag width="720px" @closed="closed">
      <div v-tit="'账号信息'">
        <GForm ref="detail" :config="formConfig" :rules="formRules" labelWidth="120px" v-model="form"></GForm>
      </div>
      <span slot="footer">
        <el-button type="primary" @click="handleConfirm">确定</el-button>
        <el-button @click="dialogModule.flag = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import tableTitle from 'commons/TableTitle'

export default {
  name: 'serialrule',
  data() {
    return {
      tableSelectData: [],
      dialogModule: {
        loading: false,
        flag: false,
        title: '',
        data: null,
        type: ''
      },
      form: {
       
      },

    }
  },
  computed: {
    btnConfig() {
      return [
        {
          label: this.$t('common.create'),
          invalid: 'newCreate'
        },
        {
          label: this.$t('common.delete'),
          disabled: true,
          invalid: 'del'
        },
        {
          label: '启用/停用',
          disabled: true,
          invalid: 'star'
        }
      ]
    },
    baseColumns() {
      return [
        {
          label: this.$t("common.user"),
          prop: "username",
          input: "input",
        },
        {
          label: this.$t("app.fullname"),
          prop: "fullname",
          input: "input",
        },
        {
          label: this.$t("app.email"),
          prop: "email",
          input: "input",
        },
        {
          label: this.$t("common.status"),
          prop: "status",
          input: "select",
          options: [
            { value: 1, label: "启用" },
            { value: -1, label: "停用" },
          ],
        },
      ];
    },
    formConfig() {
      return [
        {
          label: this.$t("common.user"),
          prop: 'username',
          type: 'input'
        },
        {
          label: this.$t("app.fullname"),
          prop: 'fullname',
          type: 'input'
        },
        {
          label: '密码',
          prop: 'password',
          type: 'input',
          show: true
        },
        {
          label: this.$t("app.email"),
          prop: 'email',
          type: 'input'
        },
        {
          label: this.$t("common.status"),
          prop: 'status',
          type: 'select',
          options:[
          { label: '启用', value: 1 },
          { label: '停用', value: -1}],
        },

      ]
    },
    formRules() {
      return {
        username: [
          {
            required: true,
            message: '请输入账号',
            trigger: 'blur'
          }
        ],

        password: [
          {
            required: true,
            message: '请输入流水号编码',
            trigger: 'blur'
          }
        ],
        type: [
          {
            required: true,
            message: '请输入流水号生成类型',
            trigger: 'blur'
          }
        ],
      }
    },
    apiMap() {
      return {
        getListApi: '/user/list',
        getInfoApi:'/user/queryuserByid',
        editApi:'user/save',
        deleteApi: 'user/delete',
        addApi: 'user/save'
      }
    }
  },
  methods: {
    handleConfirm() {
      this.$refs.detail.validate().then(valid => {
        const params = this._.cloneDeep(this.form)

        let promise
        if (this.dialogModule.type == 'edit') {
          promise = this.$post(this.apiMap.editApi, params)
        } else {
          promise = this.$post(this.apiMap.addApi, params)
        }
        promise.then(res => {
          this.$message.success(res.returnMgr)
          this.getTableData()
          this.$refs.detail?.resetFields()
          this.dialogModule.flag = false
        })
      })

    },
    getInfoById(id) {
      this.$post(this.apiMap.getInfoApi, {
        id
      }).then(res => {
        this.form = res.data.item
        this.dialogModule.flag = true
      })
    },
    setdialog(data) {
      this.formConfig.forEach(temp=>{
        if(temp.prop=='password'){
          temp.show=false
        }
      })
      this.dialogModule.title = `编辑账号`
      this.dialogModule.type = 'edit'
      this.dialogModule.data = data
      this.getInfoById(data.id)
    },
    newCreate() {
      this.formConfig.forEach(temp=>{
        if(temp.prop=='password'){
          temp.show=true
        }
      })
      this.$refs.detail?.resetFields()
      console.log(this.$refs.detail)
      this.dialogModule.title = '新增账号'
      this.dialogModule.type = 'add'
      this.dialogModule.data = null
      this.dialogModule.flag = true

    },
    //删除
    async del(data) {
      this.$post(this.apiMap.deleteApi, data).then(res => {
        this.$message.success(res.returnMgr)
        this.getTableData()
      })
    },
    async star(data) {
      let arr = [];
      data.forEach((item) => {
        arr.push(item.username);
      });
      try {
        let res = await this.$api.post(`/user/updatStatus`, arr);
        this.$message.success(res.returnMgr);
        this.getTableData();
      } catch (e) {
        this.$message.error(e);
      }
    },
    closed() {
      this.$refs.detail?.resetFields()
    },
    cbFun(res) {
      return { list: res.data.page.records, total: res.data.page.total }
    },
    async getTableData() {
      this.$refs.table.getTableData()
    }
  },
  mounted() {

  },
  components: {
    'v-tableTitle': tableTitle
  }
}
</script>

<style scoped>
</style>
